<template>
	<view class="content">
		<mescroll-uni ref="mescrollRef" top="80" @init="mescrollInit"  @up="upCallback" :up="upOption" :down="{use: false}">
			<view class="section-0">
			<view class="section-body">
				<view class="form">
					<view class="form-item">
						<view class="label">单位名称</view>
						<view class="shape"></view>
						<view class="input">
							<u--input placeholderClass="input-placeholder" class="input-body" placeholder="单位名称"
								v-model="dwName"></u--input>
						</view>
					</view>
					<view class="form-item">
						<view class="label">项目名称</view>
						<view class="shape"></view>
						<view class="input">
							<u--input placeholderClass="input-placeholder" class="input-body" placeholder="项目名称"
								v-model="projectName"></u--input>
						</view>
					</view>
					<view class="actions">
						<view class="action" @click="handleResetForm()">
							<text>重</text>
							<text>置</text>
						</view>
						<view class="action search" @click="handleSearch()">
							<text>查</text>
							<text>询</text>
						</view>
					</view>
				</view>
				<view class="list">
					<view :class="`item ${expandList.indexOf(item.id) !== -1 ? 'item__expand' : ''}`"
						v-for="(item, index) in list" :key="item.id">
						<view class="parent">
							<view class="action" @click="expandChange(item.id)">
								<view class="iconfont icon-xiangyou1"></view>
							</view>
							<view class="name">
								{{index + 1}}.{{item.project_name}}
							</view>
							<view class="count">{{item.children ? item.children.length : 0}}<text>个</text></view>
						</view>
						<view class="child" v-if="expandList.indexOf(item.id) !== -1">
							<view class="child-item" v-for="(item2, idx) in item.children" :key="item2.id + idx">
								<view class="top">
									<view :class="`action ${expandList.indexOf(`${index}-${idx}`) !== -1 ? 'action__active' : ''}`" @click="expandChange(`${index}-${idx}`, item2.id)">
										<view class="iconfont icon-xiangyou1"></view>
									</view>
									<view class="name">
										{{index + 1}}-{{idx + 1}}.{{item2.project_name}}
									</view>
								</view>
								<view class="grad" v-if="expandList.indexOf(`${index}-${idx}`) !== -1">
									<view class="grad-item" v-for="(item3, idx3) in item2.children" :key="item3.id">
										<view class="grad-top">
											<view class="name">
												{{index + 1}}-{{idx + 1}}-{{idx3 + 1}}.{{item3.dw_name}}({{item3.dw_type}})
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import { projectZrrListApi, projectZrrInfoApi } from '@/api/statistics.js';
	export default {
		data() {
			return {
				total: 0,
				dwName: '',
				projectName: '',
				curTab: {
					id: 1,
					name: '分包总数'
				},
				tabList: [
					{
						name: '分包总数',
						id: 1
					},
					{
						name: '专业分包',
						id: 2
					},
					{
						name: '劳务分包',
						id: 3
					},
				],
				list: [],
				expandList: [],
				curIdx: 0,
				curName: '分包总数',
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				upOption:{
					textNoMore: '-- 没有更多了 --'
				},
				pageSize:20,
			}
		},
		methods: {
			async expandChange(id, project_id) {
				const idx = this.expandList.indexOf(id);
				if (idx !== -1) {
					this.expandList.splice(idx, 1);
				} else {
					this.expandList.push(id);
				}
				if (project_id) {
					if (!this.list[id.split('-')[0]].children[id.split('-')[1]].children) {
						this.fetchInfo(id, project_id)
					}
				}
			},
			async fetchInfo(id, project_id) {
				uni.showLoading({title: '加载中...'});
				const { data } = await projectZrrInfoApi({project_id: project_id});
				if (data.code === 1) {
					let dep = JSON.parse(JSON.stringify(this.list));
					dep[id.split('-')[0]].children[id.split('-')[1]].children = data.data;
					this.list = dep;
				}
				uni.hideLoading();
			},
			handleResetForm(){
				this.dwName = '';
				this.projectName = '';
				this.mescroll.resetUpScroll();
this.mescroll.scrollTo(0,0);
			},
			handleSearch(){
				this.mescroll.resetUpScroll();
this.mescroll.scrollTo(0,0);
			},
			/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*上拉加载的回调*/
			async upCallback(page) {
				const {data} =  await projectZrrListApi({
					dwType: '',
					dwName: this.dwName,
					projectName: this.projectName,
					page: page.num,
					pageSize: this.pageSize
				});
				
				if (data.code === 1 || data.code === 200) {
					let arr = [];
					for (let key in data.data.group_list) {
						arr.push(data.data.group_list[key]);
					}
					this.total = data.data.total;
					// 接口返回的当前页数据列表 (数组)
					let curPageData = arr; 
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					// let curPageLen = curPageData.length; 
					let curPageLen = 1; 
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = data.data.group_list.last_page; 
					//设置列表数据
					if(page.num == 1) this.list = []; //如果是第一页需手动置空列表
					this.list = this.list.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					this.mescroll.endByPage(curPageLen, totalPage); 
					setTimeout(()=>{
						this.mescroll.endSuccess(curPageLen);
					},20);
				} else{
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.section-0 {
		width: 100%;
		background: #2e5efe;

		.section-body {
			width: 100%;
			height: 100%;
		
			background-color: #fff;
			overflow: hidden;
			.tab{
				
					width: 100%;
					height: 80rpx;
					@include clear();
					background-color: #1534ce;
					.item{
						width: 33.33%;
						float: left;
						height: 80rpx;
						background-color: #1534ce;
						position: relative;
						.label{
							height: 80rpx;
							line-height: 80rpx;
							position: relative;
							z-index: 10;
							box-sizing: border-box;
							text-align: center;
							width: 100%;
							font-size: 26rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: #ffffff;
						}
						.shape{
							z-index: 1;
							width: 50rpx;
							height: 50rpx;
							position: absolute;
							bottom: 0;
							left: -50rpx;
							background: #000;
							display: none;
							background-color: #fff;
							overflow: hidden;
							.shape-body{
								width: 50rpx;
								height: 50rpx;
								background-color: #1534ce;
								border-bottom-right-radius: 40rpx;
							}
						}
						.shape-mirrow{
							z-index: 1;
							left: 0;
							display: none;
							.shape-body{
								border-bottom-right-radius: 0rpx;
								border-bottom-left-radius: 40rpx;
							}
						}
					}
					.item__active{
						border-top-left-radius: 40rpx;
						border-top-right-radius: 40rpx;
						background-color: #fff;
						.label{
							color: #46464a;
						}
						.shape{
							display: block;
						}
						.shape-mirrow{
							display: none;
						}
					}
					.item__active_next{
						border-bottom-right-radius: 50rpx;
						.shape{
							display: none;
						}
						.shape-mirrow{
							display: block;
						}
					}
				
			}
			.list {
				width: 670rpx;
				box-sizing: border-box;
				margin-left: 40rpx;
				border-top: 2rpx solid #d8e4f2;

				.item {
					width: 100%;
					border-bottom: solid 2rpx #f2f2f0;

					.parent {
						width: 100%;
						@include clear();
						.name {					
							width: 550rpx;
							line-height: 30rpx;
							padding: 26rpx 0;
							font-size: 26rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 2rpx;
							color: #3b3c40;
							float: left;
						}

						.count {
							float: right;
							min-width: 46rpx;
							height: 46rpx;
							margin-top: 18rpx;
							border-radius: 28rpx;
							line-height: 46rpx;
							text-align: center;
							font-size: 26rpx;
							font-weight: bold;
							color: #395cf5;
							background: #ffde00;
							text {
								font-size: 16rpx;
							}
						}

						.action {
							float: left;
							width: 32rpx;
							margin-right: 18rpx;
							line-height: 82rpx;
							text-align: center;
							color: #3b3c40;

							.iconfont {
								font-size: 32rpx;
								transition: 0.2s ease;
								transform: rotate(90deg);
							}

						}
					}
					.child {
						width: 750rpx;
						margin-left: - 40rpx;
						background: #f2f2fa;

						.child-item {
							
							width: 100%;
							border-bottom: 2rpx solid #e3e8f5;
							@include clear();
							&:last-child {
								border-bottom: none;
							}
							
							
							.top {
								width: 100%;
								overflow: hidden;
								box-sizing: border-box;
								padding-left: 40rpx;

								.name {
									float: left;
									width: calc(100% - 90rpx);
									box-sizing: border-box;
									padding: 26rpx 0;
									font-size: 26rpx;
									color: #3b3c40;
									font-size: 26rpx;
								}

								.action {
									width: 32rpx;
									line-height: 82rpx;
									float: left;
									text-align: center;
									color: #7f98ae;
									margin-right: 18rpx;
									.iconfont {
										font-size: 32rpx;
										transition: 0.2s ease;
										transform: rotate(90deg);
									}
								}
							}
						}
					}
					
					.grad{
						width: 100%;
						background: #d9d9e2;
						.grad-item{
							width: 100%;
							border-bottom: 2rpx solid #e3e8f5;
							
							&:last-child {
								border-bottom: none;
							}
							
							.grad-top {
								width: 100%;
								overflow: hidden;
								box-sizing: border-box;
								padding-left: 40rpx;
							
								.name {
									float: left;
									width: calc(100% - 40rpx);
									padding: 26rpx 0;
									font-size: 26rpx;
									color: #3b3c40;
									padding-left: 50rpx;
									box-sizing: border-box;
								}
							}
						}
					}
					.action__active{
						.iconfont{
							transform: rotate(-90deg)!important;
						}
					}
				}

				.item__expand {
					.parent {
						.action {
							.iconfont {
								transform: rotate(-90deg);
							}
						}
					}

					.child {
						box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.05) inset;
					}
				}
			}

			.actions {
				width: 100%;
				height: 50rpx;
				margin-top: 29rpx;
				padding-bottom: 40rpx;
				display: flex;
				justify-content: space-between;

				.action {
					width: 288rpx;
					height: 48rpx;
					background-color: #395cf5;
					border-radius: 20rpx;
					text-align: center;
					line-height: 48rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 48rpx;
					color: #ffffff;

					text {
						&:first-child {
							margin-right: 20rpx;
						}
					}
				}

				.search {
					background-color: #1534ce;
				}
			}

			.form {
				width: 100%;
				padding: 0 75rpx;
				padding-top: 40rpx;
				box-sizing: border-box;

				.form-item {
					width: 600rpx;
					height: 48rpx;
					border-radius: 20rpx;
					border: solid 2rpx #1534ce;
					margin: 0 auto;
					margin-bottom: 25rpx;

					&:last-child {
						margin-bottom: 34rpx;
					}

					@include clear();

					.label {
						float: left;
						width: 134rpx;
						height: 48rpx;
						text-align: center;
						line-height: 44rpx;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #1534ce;
					}

					.shape {
						width: 3rpx;
						height: 32rpx;
						background-color: #7f98ae;
						float: left;
						margin-top: 8rpx;
					}

					.input {
						float: left;
						width: calc(100% - 134rpx - 3rpx);

						.input-body {
							box-sizing: border-box;
							width: 100%;
							height: 44rpx;
							padding: 0 !important;
							border: none;
							padding-left: 30rpx !important;
							padding-right: 30rpx !important;
							font-size: 26rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: rgba(0, 0, 0, 0.7);
						}

						.input-placeholder {
							font-size: 26rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: rgba(0, 0, 0, 0.5);
						}
					}
				}
			}

			.total {
				box-sizing: border-box;
				padding: 0 70rpx;
				height: 80rpx;
				line-height: 70rpx;
				font-size: 22rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 80rpx;
				letter-spacing: 0rpx;
				color: #3b3c40;
			}

			.charts {
				width: 100%;
				box-sizing: border-box;
				height: 315rpx;
				padding: 0 70rpx;
				padding-left: calc(70rpx - 15px);
				margin-bottom: 30rpx;
				#echarts {
					width: 100%;
					height: 100%;
				}
			}

			.top-tab {
				width: 670rpx;
				margin-left: 40rpx;
				height: 52rpx;
				line-height: 52rpx;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 30rpx;
				margin-top: 15rpx;
				border-bottom: solid 3rpx #f2f2f0;

				.item {
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 50rpx;
					letter-spacing: 0rpx;
					color: #d8d8d5;
					position: relative;

					.shape {
						opacity: 0;
						transform: translateY(6rpx);
						position: absolute;
						bottom: -6rpx;
						width: 100%;
						height: 8rpx;
						background-color: #1534ce;
						border-radius: 8rpx;
						transition: 0.3s ease;
					}
				}

				.item__active {
					color: #3b3c40;

					.shape {
						opacity: 1;
						transform: translateY(0rpx);
					}
				}
			}
		}
	}
</style>
